<template>
  <div class="addVolunteer">
    <!--加入志愿者-->
    <content-header :title="routeItem.title"></content-header>
    <div class="title xui-margin-vertical-sm">
      <span class="xui-margin-left-sm">请如实填写以上资料。对于资料不全者，我馆将不录入其个人信息</span>
    </div>
    <div class="form-group xui-padding-top-lg">
      <el-form :inline="true" :rules="rules" :model="formInline" class="demo-form-inline" size="mini">
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="formInline.name"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="性别：" prop="sex">
              <el-radio-group v-model="formInline.sex">
                <el-radio label="男" value="man"></el-radio>
                <el-radio label="女" value="female"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="民族：" prop="nation">
              <el-input v-model="formInline.name"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="出生年月：" prop="date">
              <el-col>
                <el-date-picker type="date" v-model="formInline.date"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="政治面貌：" prop="political">
              <el-input v-model="formInline.political"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="籍贯：" prop="native">
              <el-input v-model="formInline.native"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="身高：" prop="height">
              <el-input v-model="formInline.height"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="学历：" prop="record">
              <el-input v-model="formInline.record"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="毕业时间：" prop="graduation">
              <el-col>
                <el-date-picker type="date" v-model="formInline.graduation"
                                style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="毕业院校及专业：" prop="university">
              <el-input v-model="formInline.university"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="电话：" prop="phone">
              <el-input v-model="formInline.phone"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="formInline.email"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="工作单位：" prop="company">
              <el-input v-model="formInline.company"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="特长爱好：" prop="hobby">
              <el-input v-model="formInline.hobby"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-6">
            <el-form-item label="健康状况：" prop="health">
              <el-input v-model="formInline.health"></el-input>
            </el-form-item>
          </div>
          <div class="xui-grid-equal-6">
            <el-form-item label="紧急联系人电话：" prop="urgent">
              <el-input v-model="formInline.urgent"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item class="all" label="家庭住址：" prop="address">
              <el-input v-model="formInline.address"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item class="all" label="个人简介：" prop="summary">
              <el-input v-model="formInline.summary"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item class="all" label="志愿加入：" prop="add">
              <el-radio-group v-model="formInline.add" class="xui-padding-left-sm">
                <el-radio label="展览讲解" value="man"></el-radio>
                <el-radio label="资讯导览" value="female"></el-radio>
                <el-radio label="典藏研究" value="man"></el-radio>
                <el-radio label="公共教育" value="female"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="xui-grid-box">
          <div class="xui-grid-equal-12">
            <el-form-item class="all" label="拟服务时间：" prop="service">
              <el-checkbox-group v-model="formInline.service" class="xui-padding-left-sm xui-padding-top-xs c-bg">
                <div>
                  <el-checkbox label="周二上午" name="service"></el-checkbox>
                  <el-checkbox label="周三上午" name="service"></el-checkbox>
                  <el-checkbox label="周四上午" name="service"></el-checkbox>
                  <el-checkbox label="周五上午" name="service"></el-checkbox>
                  <el-checkbox label="周六上午" name="service"></el-checkbox>
                  <el-checkbox label="周日上午" name="service"></el-checkbox>
                </div>
                <div>
                  <el-checkbox label="周二下午" name="service"></el-checkbox>
                  <el-checkbox label="周三下午" name="service"></el-checkbox>
                  <el-checkbox label="周四下午" name="service"></el-checkbox>
                  <el-checkbox label="周五下午" name="service"></el-checkbox>
                  <el-checkbox label="周六下午" name="service"></el-checkbox>
                  <el-checkbox label="周日下午" name="service"></el-checkbox>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
        <div class="xui-margin-left-lg">
          <el-checkbox-group v-model="formInline.ok">
            <el-checkbox label="本人保证以上填写的内容真实有效" name="type"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn xui-margin-top-lg">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import ContentHeader from "../../../components/widge/content-header";
import { getNewsInfoList } from "@/api/news";

export default {
  components: { ContentHeader },
  data() {
    return {
      formInline: {
        name: "",
        sex: "man",
        nation: "",
        date: "",
        political: "",
        native: "",
        height: "",
        record: "",
        graduation: "",
        university: "",
        phone: "",
        email: "",
        company: "",
        hobby: "",
        health: "",
        urgent: "",
        address: "",
        summary: "",
        add: "",
        ok: "",
        service: []
      },
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的名字"
          },
          {
            min: 3,
            max: 5,
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            trigger: "change",
            value: "man",
            message: "请选择您的性别"
          }
        ],
        nation: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的民族"
          },
          {
            min: 2,
            max: 15,
            trigger: "blur"
          }
        ],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择出生年月",
            trigger: "change"
          }
        ],
        political: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的政治面貌"
          },
          {
            min: 2,
            max: 15,
            trigger: "blur"
          }
        ],
        native: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的籍贯"
          },
          {
            min: 2,
            max: 25,
            trigger: "blur"
          }
        ],
        height: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的身高"
          },
          {
            min: 2,
            max: 15,
            trigger: "blur"
          }
        ],
        record: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的学历"
          },
          {
            min: 2,
            max: 5,
            trigger: "blur"
          }
        ],
        graduation: [
          {
            type: "date",
            required: true,
            message: "请选择毕业时间",
            trigger: "change"
          }
        ],
        university: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的毕业院校及专业"
          },
          {
            min: 2,
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            message: "请输入正确的手机号码"
          },
          {
            trigger: "blur",
            pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/
          }
        ],
        email: [
          {
            required: true,
            trigger: "blur",
            message: "请输入正确的邮箱"
          },
          {
            min: 3,
            max: 5,
            trigger: "blur",
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
          }
        ],
        company: [
          {
            required: true,
            trigger: "blur"
          },
          {
            min: 1,
            message: "请输入您的工作单位",
            trigger: "blur"
          }
        ],
        hobby: [
          {
            required: true,
            trigger: "blur"
          },
          {
            min: 1,
            message: "请输入您的爱好",
            trigger: "blur"
          }
        ],
        health: [
          {
            required: true,
            trigger: "blur"
          },
          {
            min: 3,
            max: 5,
            message: "请输入您的健康状况",
            trigger: "blur"
          }
        ],
        urgent: [
          {
            required: true,
            trigger: "blur"
          },
          {
            message: "请输入正确的手机号码",
            trigger: "blur",
            pattern: /^1[3|4|5|6|7|8][0-9]\d{4,8}$/
          }
        ],
        address: [
          {
            required: true,
            trigger: "blur"
          },
          {
            min: 2,
            message: "请输入您的家庭地址",
            trigger: "blur"
          }
        ],
        summary: [
          {
            required: true,
            trigger: "blur"
          },
          {
            min: 2,
            message: "请输入您的个人简介",
            trigger: "blur"
          }
        ],
        add: [
          {
            required: true,
            trigger: "change"
          }
        ],
        ok: [
          {
            required: true,
            trigger: "change"
          }
        ],
        service: [
          {
            required: true,
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    routeItem() {
      let routes = this.$store.getters.siteMap;
      let result;
      routes.forEach(route => {
        if (route.children) {
          route.children.forEach(child => {
            if (child.name == this.$route.name) {
              result = child;
            }
          });
        }
      });
      return result;
    },
    userId() {
      return this.$store.getters.userId;
    }
  }
};
</script>

<style lang="less">
.addVolunteer {
  .title {
    height: 58px;
    line-height: 58px;
    background-color: #f4efd9;
  }
  .title span {
    font-size: 14px;
    color: #e02a29;
  }
  .form-group {
    width: 98%;
    margin: 0 auto;
  }
  .el-form-item {
    width: 100%;
  }
  .el-form-item__content {
    width: 62%;
  }
  .all {
    width: 100%;
    .el-form-item__content {
      width: 81%;
    }
  }
  .c-bg {
    background-color: #fafafa;
  }
  .btn {
    text-align: center;
  }
  .el-button {
    display: inline-block;
    height: 38px;
    font-size: 14px;
    background-color: #dbad23;
    border-color: #dbad23;
  }
}
</style>
